import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [{
        path: '/login',
        name: 'login',
        component: () =>
            import ('@/views/login')
            // #这里是路由懒加载的写法默认情况下，vue脚手架打包会将所有vue文件打包到一个文件中，那么此时访问/login，就会把打包之后的总文件加载到内存中，这样做浪费空间，访问界面效率比较低 # 路由懒加载处理之后，就不会合并打包，默认一个vue文件，打包一个对应的文件

        // #完整写法是：@views/login/index.vue，但是index.vue可以省略，导入一个目录时默认导入目录下的index.vue
    },
    {
        path: '/',
        // name: 'layout', // 如果父路由有默认子路由，那他的name就没有意义，可以省略
        component: () =>
            import ('@/views/layout'),
        children: [{
                path: '', // 默认子路由，只能有一个，当访问/的时候，显示home组件
                name: 'home',
                component: () =>
                    import ('@/views/home')
            },
            {
                path: '/qa', // 这里为啥可以以/开头 , 因为这里写的是完整路径,父路由的路径是/   ***
                name: 'qa',
                component: () =>
                    import ('@/views/qa')
            },
            {
                path: '/video',
                name: 'video',
                component: () =>
                    import ('@/views/video')
            },
            {
                path: '/my',
                name: 'my',
                component: () =>
                    import ('@/views/my')
            }
        ]
    },
    {
        path: '/search',
        name: 'search',
        component: () =>
            import ('@/views/search')

    },
    {
        path: '/article/:articleId', //需要传递文章id
        name: 'article',
        component: () =>
            import ('@/views/article'),
        // 开启 Props 传参，说白了就是把路由参数映射到组件的 props 数据中
        props: true

    },
    {
        path: '/user/profile',
        name: 'user-profile',
        component: () =>
            import ('@/views/user-profile')
    },
    {
        path: '/ai',
        name: 'ai',
        component: () =>
            import ('@/views/ai')
    }

]

const router = new VueRouter({
    routes
})

export default router